<template>
	<view class="hb-comment animated fadeIn">
		<u-navbar :title="navTitle" :bgColor="theme_color" :autoBack="true" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" color="#ffffff"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#ffffff"></u-line>
				<u-icon name="home" size="20" color="#ffffff" @click.stop="onToHomePage"></u-icon>
			</view>
		</u-navbar>
		<view :style="'margin-top:' + navH + 'px;'" class="bg-white">
			<view class="cu-card">
				<view class="cu-item">
					<view class="title text-bold text-xxl font-color-black">{{ content.title }}</view>
					<view class="flex justify-between margin-top">
						<view class="text-gray text-sm text-left">{{ content.create_time}}</view>
						<u-tag text="查看商机名片" @click="toBusinessCard(content.card_id)" v-if="content.card_id"
							type="success"></u-tag>
						<view @click="doSupport(content.pid)" style="align-items: center;" class="flex">
							<image v-if="content.is_like" :src="img_url+'/statics/yilangmp/xin.png'"
								:class="{'heart':i_like == 1}" style="width: 20px; height:20px;">
							</image>
							<image v-else="!content.is_like" :src="img_url+'/statics/yilangmp/xin-3.png'"
								style="width: 20px; height: 20px;"></image>
							<view style="margin-left: 5px;">{{content.like_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item cur" style="height: 200upx!important;">
					<view class="cu-avatar round lg" :style="'background-image:url(' + content.user_logo + ');'"
						@tap.stop.prevent="toUser"></view>
					<view class="content">
						<view class="acea-row" style="justify-content: space-between;">
							<view class="text-cut" @tap.stop.prevent="toUser">{{ content.user_name }}</view>
							<view v-if="content.user_id != user_id">
								<u-button type="success" size="mini" @click="toChat" text="发起私聊"></u-button>
							</view>
						</view>
					</view>
					<!-- <view>
						<u-button text="关注" :plain="true" :hairline="true" shape="circle" size="mini" @click="followAction" v-if="item.is_follow == 0"></u-button>
						<u-button icon="checkbox-mark" text="已关注" :plain="true" :hairline="true" shape="circle" size="mini" v-else @click="followAction"></u-button>
					</view> -->
					<view class="flex"
						style="padding: 0 10px;justify-content: flex-end;align-items: center;position: absolute;bottom: 5px;right:0;">
						<view class="flex" style="align-items: center;">
							<view class="text-blue text-sm" style="margin-right:10px;">楼主</view>
							<view v-if="content.user_id == user_id" style="margin-right:10px;">
								<u-tag text="删除" @click="deletePost(content.pid)"></u-tag>
							</view>
						</view>
						<view style="float: right;font-size: 12px;">
							IP:{{content.ip_address || '未知'}}
						</view>
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<u-parse :content="content.content"></u-parse>
			</view>

			<view class="padding-sm" v-if="content.img.length >0">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in content.img" :key="index">
							<view class="uni-uploader__file" style="position: relative;margin: 5rpx;">
								<image class="uni-uploader__img" :src="image" :data-src="image"
									@tap.stop.prevent="onPreview">
								</image>
							</view>
						</block>
					</view>
				</view>
			</view>

			<view v-if="content.video != '' && content.video != null && content.video != undefined">
				<video :src="content.video" style="width: 100%;height: 250px;" :controls="true" :autoplay="true"
					:show-center-play-btn="true"></video>
			</view>

			<view v-if="content.users_goods_info != ''" @click="toGoodsDetail(content.users_goods_info.goods_id)"
				style="width: 100%;border-radius: 5px;background-color: #e2e2e2;height: 50px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;margin-bottom: 10px;">
				<view style="display: flex;align-items: center;margin-left: 10px;">
					<u-image :src="content.users_goods_info.original_img" width="30px" height="30px"></u-image>
					<view style="font-size: 14px;color: #111111;margin-left: 10px;">
						{{content.users_goods_info.goods_name}}
					</view>
				</view>
				<view style="margin-right: 10px;">
					<u-icon name="arrow-right" size="22" color="#999"></u-icon>
				</view>
			</view>

			<view v-if="content.supplier_goods_info != ''"
				@click="toGoodsDetailSupplier(content.supplier_goods_info.goods_id)"
				style="width: 100%;border-radius: 5px;background-color: #e2e2e2;height: 50px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;margin-bottom: 10px;">
				<view style="display: flex;align-items: center;margin-left: 10px;">
					<u-image :src="content.supplier_goods_info.original_img" width="30px" height="30px"></u-image>
					<view style="font-size: 14px;color: #111111;margin-left: 10px;">
						{{content.supplier_goods_info.goods_name || ''}}
					</view>
				</view>
				<view style="margin-right: 10px;color:green" class="flex">
					去下单 <u-icon name="arrow-right" size="22" color="#999"></u-icon>
				</view>
			</view>

			<u-alert title="声明:信息源于会员自主发布,平台仅供展示,用户须与发布者确认清楚,确保自身权益." type="info" :closable="true"></u-alert>
		</view>

		<!-- 阅读数下边那条线-start -->
		<view class="seg_line_box">
			<view class="seg_line"></view>
			<view class="seg_dot"></view>
			<view class="seg_line"></view>
		</view>
		<!-- 阅读数下边那条线-end -->
		<!-- 评论主体-start -->

		<view class="comment-list">
			<!-- 评论主体-顶部数量及发表评论按钮-start -->

			<!-- 评论主体-顶部数量及发表评论按钮-end -->
			<!-- 评论列表-start -->
			<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"> -->
			<view class="comment-num" v-if="reply_list.length > 0">
				<view>共 {{reply_list.length}} 条评论</view>
				<view class="add-btn">
					<button type="primary" size="mini" @click="commentInput('reply_father')">发表评论</button>
				</view>
			</view>
			<!-- 无评论-start -->
			<view class="comment-none" v-else>
				暂无评论，<span @click="commentInput('reply_father')" style="color: #007AFF;">抢沙发</span>
			</view>
			<!-- 无评论-end -->
			<view class="comment-box" v-for="(item, index) in reply_list" :key="index">
				<view class="comment-box-item">
					<view>
						<image :src="item.user_logo || emptyAvatar" mode="aspectFill" class="avatar"></image>
					</view>
					<view class="comment-main">
						<!-- 父评论体-start -->
						<view class="comment-main-top">
							<view class="nick-name-box">
								<view class="comLogo com1" v-if="index == 0">沙发</view>
								<view class="comLogo com2" v-if="index == 1">板凳</view>
								<view class="comLogo com3" v-if="index == 2">地板</view>
								<view class="comLogo com4" v-if="index > 2">{{index + 1}}楼</view>
								<view class="nick-name fs-12">{{item.user_name}}</view>
							</view>
							<!-- <view class="zan-box" @click="like(item.id)">
									<span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
									<img style="width: 14px; height: 14px;" v-if="!item.hasLike"
										src="" />
									<img style="width: 14px; height: 14px;" v-else
										src="" />
								</view> -->
						</view>
						<view class="comment-main-content">
							{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
							<span v-if="item.content.length > 60">
								{{item.hasShowMore ? item.content.slice(59) : '...'}}
								<span class="foot-btn" @click="showMore(item.id)">
									{{item.hasShowMore ? '收起' : '展开'}}
								</span>
							</span>
						</view>
						<view class="comment-main-foot">
							<view class="foot-time">{{item.create_time}}</view>
							<view class="foot-btn" @click="reply(item,'reply_son')">回复</view>
							<view class="foot-btn" v-if="item.user_id == user_id" @click="confirmReplyDelete(item.id)">
								删除</view>
						</view>
						<!-- 父评论体-end -->
						<!-- 子评论列表-start -->
						<view class="comment-sub-box">
							<view class="comment-sub-item" v-for="each in item.son" :key="each.id">
								<view>
									<image :src="each.user_logo || emptyAvatar" mode="aspectFill" class="avatar">
									</image>
								</view>
								<view class="comment-main">
									<view class="sub-comment-main-top">
										<view class="nick-name fs-12">{{each.user_ame}}</view>
										<!-- <view class="zan-box" @click="like(each.id)">
												<span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
												<img style="width: 14px; height: 14px;" v-if="!each.hasLike"
													src="" />
												<img style="width: 14px; height: 14px;" v-else
													src="" />
											</view> -->
									</view>
									<view class="comment-main-content">
										{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
										<span v-if="each.content.length > 60">
											{{each.hasShowMore ? each.content.slice(59) : '...'}}
											<span class="foot-btn" @click="showMore(each.id)">
												{{each.hasShowMore ? '收起' : '展开'}}
											</span>
										</span>
									</view>
									<view class="comment-main-foot">
										<view class="foot-time">{{each.create_time}}</view>
										<view class="foot-btn" v-if="each.user_id == user_id"
											@click="confirmReplyDelete(each.id)">删除
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 子评论列表-end -->
					</view>
				</view>
			</view>
			<!-- </mescroll-body> -->

			<!-- 评论列表-end -->

		</view>
		<!-- 评论主体-end -->
		<u-popup :show="reply_show" :closeable="true" @close="replyClose" :round="10">
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view class="replayTag">
							<view>回复在 {{ reply_type == 'reply_father' ? content.user_name : reply_item.user_name}} 的评论下
							</view>
							<!-- <view @click="tagClose" class="replyTagClose">×</view> -->
						</view>
					</view>
					<view>
						<view class="btn-click" @click="add">回复</view>
					</view>
				</view>
				<view class="flex" style="align-items: center;justify-content: flex-end;padding: 10rpx 0;">
					<view style="margin-right: 5px;">是否匿名:</view><u-switch v-model="anonymous"
						@change="anonymous_change" size="22"></u-switch>
				</view>
				<u-textarea v-model="reply_content" placeholder="请输入回复内容" border="bottom" height="200"></u-textarea>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		USER_ID
	} from '../../config/cache';
	import Cache from '@/utils/cache';
	import {
		post_reply_list,
		post_info,
		post_reply,
		del_post,
		del_post_reply,
		post_like
	} from "@/api/classification.js";
	import {
		mapGetters
	} from 'vuex';
	import {
		BASE_URL
	} from '@/config/app';
	export default {
		mixins: [{
			methods: options
		}],
		components: {
		},
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				emptyAvatar: "",
				content: {
					title: ' ',
					create_time: ' ',
					user_name: ' ',
					content: ' ',
					user_logo: '',
					video: '',
					img: [],
					fid: 0,
					users_goods_info: ''
				},
				title: '',
				pid: '',
				reply_list: [],
				reply_show: false,
				KeyboardHeight: 0, // 键盘高度
				reply_content: '',
				reply_item: {},
				reply_type: '',
				anonymous: true,
				is_ni: 1, //是否匿名 1匿名 0公开
				i_like: 0,
				img_url: BASE_URL,
				navTitle: '信息详情'
			}
		},
		mixins: [MescrollMixin, {
			methods: options
		}],
		mounted: function() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		computed: {
			...mapGetters(["isLogin", "app_token", "user_id"]),
		},
		onLoad(e) {
			var that = this;
			that.navH = getApp().globalData.navHeight / 2;
			that.pid = JSON.parse(e.pid)
			uni.showLoading({
				title: '加载中...'
			})
			that.getList()
		},
		onShow() {
			this.getPostInfo()
		},
		//#ifdef MP
		// 分享到微信好友
		onShareAppMessage(e) {
			if (this.content.fid == 100) {
				return {
					title: this.content.title,
					imageUrl: this.content.poster,
					path: '/pages/classification/detailbak?pid=' + this.pid
				};
			} else {
				var imageUrl = '';
				if (this.content.img.length > 0 && this.content.img) {
					imageUrl = this.content.img[0];
				}
				return {
					title: this.content.title,
					imageUrl: imageUrl,
					path: '/pages/classification/detailbak?pid=' + this.pid
				};
			}

		},
		//分享到朋友圈
		onShareTimeline(res) {
			var imageUrl = '';
			if (this.content.img.length > 0 && this.content.img) {
				imageUrl = this.content.img[0];
			}
			return {
				title: this.content.title,
				imageUrl: imageUrl,
				path: '/pages/classification/detailbak?pid=' + this.pid
			};
		},
		//#endif
		methods: {
			getPostInfo() {
				var that = this;
				post_info({
					pid: that.pid,
					app_token: that.app_token
				}).then(res => {
					uni.hideLoading()
					that.content = res.data
					that.title = res.data.title;
					if (that.content.fid == 100) {
						that.navTitle = '行业资讯'
					}
				})
			},
			doSupport(pid) {
				var that = this;
				post_like({
					pid: pid,
					app_token: that.app_token
				}).then(res => {
					if (res.status != 0) {
						return uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					this.i_like = 1;
					that.getPostInfo()
				})
			},
			toChat() {
				if (!this.isLogin) {
					this.$util.Tips({
						title: '请先登录'
					}, '/pages/users/login/index')
				} else {
					this.$util.Tips('/pages/chat/chat/index?puid=' + this.content.user_id + '&title=' + this.content
						.user_name)
				}
			},
			// followAction(){
			// 	var that = this;
			// 	follow_action({
			// 		app_token:that.app_token,
			// 		user_id:that.item.user_id
			// 	}).then(res=>{
			// 		 that.$util.Tips({
			// 			 title:res.msg
			// 		 })
			// 	})
			// },
			onPreview(e) {
				var that = this;
				uni.previewImage({
					current: e.currentTarget.dataset.src,
					urls: that.content.img,
				});
			},
			toGoodsDetail(id) {
				uni.navigateTo({
					url: `/pages/users/distribution/self_sale_goods_detail/index?goods_id=${id}`
				})
			},
			toGoodsDetailSupplier(id) {
				uni.navigateTo({
					url: `/pages/hardware_shop/goods_details/index?goods_id=${id}`
				})
			},
			toUser() {
				// uni.navigateTo({
				// 	url: './poster/index?poster_user_id=' + this.content.user_id
				// })
				uni.reLaunch({
					url: './poster/index?poster_user_id=' + this.content.user_id
				})
			},
			anonymous_change(e) {
				if (e == true) {
					this.is_ni = 1;
				} else {
					this.is_ni = 0;
				}
			},
			toBusinessCard(id) {
				uni.navigateTo({
					url: '/pages/yellow_page/card_info/index?id=' + id
				})
			},
			getList() {
				var that = this;
				post_reply_list({
					pid: that.pid,
					// page: page.num,
				}).then(res => {
					// this.mescroll.endSuccess(res.data.length);

					// if (page.num == 1) this.reply_list = [];

					// this.reply_list = this.reply_list.concat(res.data)
					this.reply_list = res.data;
				}).catch(() => {
					// this.mescroll.endErr();
				})
			},
			clickComment(id) {

			},
			reply(item, type) {
				this.reply_show = true;
				this.reply_content = '';
				this.reply_item = item;
				this.reply_type = type;
			},
			replyClose() {
				this.reply_show = false;
				setTimeout(() => {
					this.reply_content = '';
					this.reply_item = {};
					this.reply_type = '';
				}, 1000)
			},
			showMore(commentId) {
				for (var i in this.reply_list) {
					if (this.reply_list[i].id == commentId) {
						this.reply_list[i].hasShowMore = !this.reply_list[i].hasShowMore;
						this.$forceUpdate();
						return
					}
					for (var j in this.reply_list[i].son) {
						if (this.reply_list[i].son[j].id == commentId) {
							this.reply_list[i].son[j].hasShowMore = !this.reply_list[i].son[j]
								.hasShowMore;
							this.$forceUpdate();
							return
						}
					}
				}
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			closeInput() {
				this.reply_show = false;
				setTimeout(() => {
					this.reply_content = '';
					this.reply_item = {};
					this.reply_type = '';
				}, 1000)
			},
			commentInput(type) {
				this.reply_show = true;
				this.reply_content = '';
				this.reply_type = type;
			},
			add() {
				var that = this;
				if (this.reply_content == '') {
					return this.$util.Tips({
						title: '请输入回复内容'
					})
				}

				var to_reply = 0;
				if (that.reply_type != 'reply_father') {
					to_reply = that.reply_item.id;
				}
				post_reply({
					pid: that.content.pid,
					app_token: that.app_token,
					content: that.reply_content,
					to_reply: to_reply,
					is_ni: that.is_ni
				}).then(res => {
					that.$util.Tips({
						title: res.msg
					})
					if (res.status == 0) {
						setTimeout(() => {
							that.reply_show = false;
							setTimeout(() => {
								that.reply_content = '';
								that.reply_item = {};
								this.reply_type = '';
							}, 500)
						}, 2000)
						that.getList()
					}
				})
			},
			confirmReplyDelete(id) {
				var that = this;
				del_post_reply({
					app_token: that.app_token,
					id: id
				}).then(res => {
					that.$util.Tips({
						title: res.msg
					})
					that.getList()
				})
			},
			deletePost(pid) {
				var that = this;
				del_post({
					app_token: that.app_token,
					pid: pid
				}).then(res => {
					that.$util.Tips({
						title: res.msg
					})
					setTimeout(res => {
						uni.navigateBack()
						uni.$emit('updateFollowOrSupport')
					}, 2000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hb-comment {
		padding: 10rpx;
		background-color: white;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
	}

	.comment-main-top {
		width: 600rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		width: 510rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #2d8cf0;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #007AFF;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 0;
		border-bottom: 1px dashed #ddd;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.heart {
		animation: heartbeat 1s;
	}

	@keyframes heartbeat {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		25% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.5);
			opacity: 1;
		}

		75% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0.5);
			opacity: 0;
		}
	}
</style>